<template>
  <div class="cityListPage">
    <van-nav-bar title="城市列表" left-arrow @click-left="onClickLeft" />

    <van-index-bar>
      <van-index-anchor index="1">当前城市</van-index-anchor>
      <van-cell :title="$store.state.name" />
      <van-index-anchor />
      <van-index-anchor index="1">热门城市</van-index-anchor>
      <van-cell
        :title="item.label"
        v-for="item in areaHotList"
        :key="item.value"
        @click="toPush(item.label, item.value)"
      />
      <van-index-anchor />
      <div v-for="(item, index) in FirstPin" :key="index">
        <van-index-anchor :index="item">
          {{ item }}
        </van-index-anchor>
        <div v-for="itemSon in cities[item]" :key="itemSon.value">
          <van-cell
            :title="itemSon.label"
            @click="toPush(itemSon.label, itemSon.value)"
          />
        </div>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { areaCityAPI, areaHotAPI } from "@/api";
export default {
  name: "cltyList",
  data() {
    return {
      areaCityList: [],
      areaHotList: [],
      FirstPin: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
      cities: {},
    };
  },
  props: ["level", "city"],
  mounted() {
    this.areaCity();
    this.areaHot();
  },
  methods: {
    async areaCity() {
      console.log(this.city);
      try {
        const res = await areaCityAPI({ level: this.level });
        let list = res.data.body;
        let cityName = {};
        this.FirstPin.forEach((item) => {
          cityName[item] = [];
          list.forEach((el) => {
            let first = el.pinyin.substring(0, 1).toUpperCase();
            if (first == item) {
              cityName[item].push(el);
            }
          });
        });
        this.$nextTick(() => {
          this.cities = cityName;
          console.log(this.cities);
        });
        console.log(this.cities);
      } catch (err) {
        console.log(err);
      }
    },
    async areaHot() {
      console.log(this.city);
      try {
        const res = await areaHotAPI();
        this.areaHotList = res.data.body;
        console.log(22222, res);
      } catch (err) {
        console.log(err);
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    toPush(name, value) {
      // this.$router.push({path:"/layout/home"})
      this.$router.go(-1);
      this.$store.commit("City", name);
      this.$store.commit("cityId", value);
    },
  },
};
</script>

<style>
.cityListPage .van-nav-bar {
  background-color: #21b97a;
}
.cityListPage .van-nav-bar__title {
  color: #fff;
}
.cityListPage .van-nav-bar .van-icon {
  color: #fff;
}
</style>
